<form class="mx-4 lg:mx-auto my-8 flex flex-col justify-start lg:w-[600px]" [formGroup]="form">
  <div class="pt-2">
    <div class="py-2 font-medium leading-[20px] text-gray-900">{{ 'PAC.Xpert.Icon' | translate: {Default: 'Icon'} }} &amp; {{ 'PAC.Xpert.Name' | translate: {Default: 'Name'} }}</div>
    <div class="flex items-center justify-between space-x-2">
  
      <emoji-avatar editable formControlName="avatar" class="rounded-lg overflow-hidden shadow-sm" />
  
      <input matInput
        class="grow h-10 px-3 text-sm font-normal bg-gray-100 rounded-lg border border-transparent outline-none appearance-none caret-primary-600 placeholder:text-gray-400 hover:bg-gray-50 hover:border hover:border-gray-300 focus:bg-gray-50 focus:border focus:border-gray-300 focus:shadow-xs"
        [value]="name"
        disabled
      >
    </div>
  </div>
  
  <div class="pt-2">
    <div class="py-2 font-medium leading-[20px] text-gray-900">{{ 'PAC.Xpert.Title' | translate: {Default: 'Title'} }}</div>
    <input matInput [placeholder]="'PAC.Xpert.EnterTitle' | translate: {Default: 'Enter title'}" class="w-full h-10 px-3 text-sm font-normal bg-gray-100 rounded-lg border border-transparent outline-none appearance-none caret-primary-600 placeholder:text-gray-400 hover:bg-gray-50 hover:border hover:border-gray-300 focus:bg-gray-50 focus:border focus:border-gray-300 focus:shadow-xs"
      formControlName="title">
  </div>
  
  <div class="pt-2">
    <div class="py-2 font-medium leading-[20px] text-gray-900">{{ 'PAC.Xpert.Description' | translate: {Default: 'Description'} }}</div>
    <textarea matInput class="w-full px-3 py-2 text-sm font-normal bg-gray-100 rounded-lg border border-transparent outline-none appearance-none caret-primary-600 placeholder:text-gray-400 hover:bg-gray-50 hover:border hover:border-gray-300 focus:bg-gray-50 focus:border focus:border-gray-300 focus:shadow-xs h-[80px] resize-none"
      [placeholder]="'PAC.Xpert.EnterXpertDesc' | translate: {Default: 'Enter xpert description'}"
      formControlName="description"
    ></textarea>
  </div>
  
  <div class="pt-2">
    <div class="py-2 font-medium leading-[20px] text-gray-900">{{'PAC.Xpert.Tags' | translate: {Default: 'Tags'} }}</div>
    <tag-select [category]="eTagCategoryEnum.XPERT" formControlName="tags"></tag-select>
  </div>
  
  <copilot-model-select class="w-full py-2 my-2"
    [modelType]="eModelType.LLM"
    formControlName="copilotModel"
  />

  <div class="flex flex-col mt-4 rounded-xl pt-2 pb-3 px-3 bg-gray-50 dark:bg-neutral-800"
    formArrayName="starters">
    <label class="ngm-input-label shrink-0">{{'PAC.Copilot.Roles.Starters' | translate: {Default: 'Starters'} }}</label>
    <ngm-input class="w-full" large
      formControlName="0"
      [placeholder]="'PAC.Copilot.Roles.FrequentlyQuestion' | translate: {Default: 'Frequently asked questions by users'}"
    />
    <ngm-input class="w-full"
      formControlName="1"
      [placeholder]="'PAC.Copilot.Roles.FrequentlyQuestion' | translate: {Default: 'Frequently asked questions by users'}"
    />
    <ngm-input class="w-full"
      formControlName="2"
      [placeholder]="'PAC.Copilot.Roles.FrequentlyQuestion' | translate: {Default: 'Frequently asked questions by users'}"
    />
    <ngm-input class="w-full"
      formControlName="3"
      [placeholder]="'PAC.Copilot.Roles.FrequentlyQuestion' | translate: {Default: 'Frequently asked questions by users'}"
    />
  </div>

  <div class="flex justify-center items-center mt-8">
    <button class="mt-2 no-underline group cursor-pointer relative shadow-2xl rounded-lg p-2 text-base font-semibold leading-6 inline-block
      bg-primary-500 shadow-zinc-900 text-white
      disabled:bg-primary-100 disabled:shadow-none disabled:cursor-not-allowed"
      [disabled]="form.invalid || form.pristine || loading()"
      (click)="saveDraft()"
    >
      @if (type() === eXpertTypeEnum.Agent) {
        <span>
        {{ 'PAC.Xpert.SaveDraft' | translate: {Default: 'Save draft'} }}
        </span>
      } @else {
        <span>
          {{ 'PAC.ACTIONS.Save' | translate: {Default: 'Save'} }}
        </span>
      }

      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="inline-block w-4 h-4 ml-0.5">
        <path d="M20 2C20.5523 2 21 2.44772 21 3V6.757L19 8.757V4H5V20H19V17.242L21 15.242V21C21 21.5523 20.5523 22 20 22H4C3.44772 22 3 21.5523 3 21V3C3 2.44772 3.44772 2 4 2H20ZM21.7782 8.80761L23.1924 10.2218L15.4142 18L13.9979 17.9979L14 16.5858L21.7782 8.80761ZM13 12V14H8V12H13ZM16 8V10H8V8H16Z"></path>
      </svg>
    </button>
  </div>
</form>

@if (loading()) {
  <ngm-spin class="absolute top-0 left-0 w-full h-full" />
}